<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
        gap: 10px;
			}

			#container {
				display: grid;
				/* 设置了 每行4列, 每列60px */
				grid-template-columns: repeat(4, 60px);
				/* 设置自动行填充（有多少行就多少行）, 每行60px */
				grid-template-rows: repeat(auto-fill, 60px);
				/* 行间距，列间距简写， 间距10px */
				gap: 10px;
				margin: 10px;
				justify-items: center;
				align-items: center;
			}

			div > div {
				background-color: #8ca0ff;
				min-width: 60px;
				min-height: 60px;
			}
			#container2 {
				margin-top: 20px;
				display: grid;
				grid-template-columns: repeat(12, 1fr);
				grid-template-rows: repeat(2, 80px);
				/* 盒子垂直剧中 */
				justify-items: center;
				align-items: center;
				/* 设所有置item在grid的位置 */
				/* justify-content: center;
				align-content: center; */
			}
			#container2 > div {
				/* 单给item项对齐 */
				justify-self: center;
				align-self: center;
				/* 设置文字居中1 */
				/* display: flex;
				justify-content: center;
				align-items: center; */
				/* 设置文字居中2 */
				display: grid;
				justify-content: center;
				align-items: center;
			}
			.grid-3 {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        grid-template-areas: 
          '. a .'
          '. a .'
          '. . .';
      }
			.grid-3>div:nth-child(1) {
        grid-area: a;
      }
		</style>
	</head>
	<body>
		<div id="container">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div id="container2">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
			<div>11</div>
			<div>12</div>
			<div>13</div>
			<div>14</div>
			<div>15</div>
		</div>
    <div class="grid-3">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
	</body>
	<script>
			const detectZoom = () => {
				let ratio = 0,
					screen = window.screen,
					ua = navigator.userAgent.toLowerCase();
				if (window.devicePixelRatio !== undefined) {
					ratio = window.devicePixelRatio;
					// ~ 位取反运算符 检测ie
				} else if (~ua.indexOf('msie')) {
					if (screen.deviceXDPI && screen.logicalXDPI) {
						ratio = screen.deviceXDPI / screen.logicalXDPI;
					}
				} else if (
					window.outerWidth !== undefined &&
					window.innerWidth !== undefined
				) {
					ratio = window.outerWidth / window.innerWidth;
				}
				if (ratio) {
					ratio = Math.round(ratio * 100);
				}
				return ratio;
			};
			function setZoom() {
				let m = detectZoom();
				document.body.style.zoom = 100 / Number(m);
			}
			setZoom();
	</script>
</html>
